<form nz-form nzLayout="vertical" #tenantCreateForm="ngForm" (ngSubmit)="save()">
    <div class="modal-header">
        <div class="modal-title">
            {{'CreateNewTenant' | localize}}
        </div>
    </div>
    <nz-form-item>
        <nz-form-label nzFor="tenancyName">{{'TenancyName' | localize}}</nz-form-label>
        <nz-form-control [nzErrorTip]="tenancyNameValidationTpl" nzHasFeedback>
            <input nz-input name="tenancyName" #tenancyNameInput="ngModel" [(ngModel)]="tenant.tenancyName"
                placeholder="{{'TenancyName' | localize}}" required maxlength="64" pattern="^[a-zA-Z][a-zA-Z0-9_-]{1,}$">
            <ng-template #tenancyNameValidationTpl let-control>
                <validation-messages [formCtrl]="control"></validation-messages>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label nzFor="Name">{{'Name' | localize}}</nz-form-label>
        <nz-form-control [nzErrorTip]="nameValidationTpl" nzHasFeedback>
            <input nz-input name="name" #nameInput="ngModel" [(ngModel)]="tenant.name" placeholder="{{'Name' | localize}}"
                required maxlength="128">
            <ng-template #nameValidationTpl let-control>
                <validation-messages [formCtrl]="control"></validation-messages>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <label nz-checkbox name="UseHostDb" [(ngModel)]="useHostDb">{{"UseHostDatabase" | localize}}</label>
        <div *ngIf="!useHostDb">
            <nz-form-label nzFor="connectionString">{{'DatabaseConnectionString' | localize}}</nz-form-label>
            <nz-form-control [nzErrorTip]="connectionStringValidationTpl" nzHasFeedback>
                <input nz-input name="connectionString" #connectionStringInput="ngModel" [(ngModel)]="tenant.connectionString"
                    placeholder="{{'DatabaseConnectionString' | localize}}" required maxlength="1024">
                <ng-template #connectionStringValidationTpl let-control>
                    <validation-messages [formCtrl]="control"></validation-messages>
                </ng-template>
            </nz-form-control>
        </div>
    </nz-form-item>    
    <nz-form-item>
        <nz-form-label nzFor="AdminEmailAddress">{{'AdminEmailAddress' | localize}}</nz-form-label>
        <nz-form-control [nzErrorTip]="adminEmailAddressValidationTpl" nzHasFeedback>
            <input nz-input type="email" name="AdminEmailAddress" #adminEmailAddressInput="ngModel" [(ngModel)]="tenant.adminEmailAddress"
                placeholder="{{'AdminEmailAddress' | localize}}" required email maxlength="256">
            <ng-template #adminEmailAddressValidationTpl let-control>
                <validation-messages [formCtrl]="control"></validation-messages>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <label nz-checkbox name="SetRandomPassword" [(ngModel)]="setRandomPassword">{{"SetRandomPassword" | localize}}</label>
        <div *ngIf="!setRandomPassword">
            <nz-form-label nzFor="AdminPassword">{{'AdminPassword' | localize}}</nz-form-label>
            <nz-form-control [nzErrorTip]="adminPasswordValidationTpl" nzHasFeedback>
                <input nz-input name="AdminPassword" #adminPasswordInput="ngModel" [(ngModel)]="tenant.adminPassword"
                    placeholder="{{'AdminPassword' | localize}}" type="password" [required]="!setRandomPassword" validateEqual="adminPasswordRepeat"
                    reverse="true" maxlength="32" [requireDigit]="passwordComplexitySetting.requireDigit"
                    [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                    [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength">
                <ng-template #adminPasswordValidationTpl let-control>
                    <ul *ngIf="control.errors">
                        <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    </ul>
                </ng-template>
            </nz-form-control>
            <nz-form-label nzFor="AdminPasswordRepeat">{{'AdminPasswordRepeat' | localize}}</nz-form-label>
            <nz-form-control [nzErrorTip]="adminPasswordRepeatValidationTpl" nzHasFeedback>
            <input nz-input name="AdminPasswordRepeat" #adminPasswordRepeatInput='ngModel' [(ngModel)]="tenantAdminPasswordRepeat"
                placeholder="{{'AdminPasswordRepeat' | localize}}" [required]="!setRandomPassword" [requireDigit]="passwordComplexitySetting.requireDigit"
                [requireLowercase]="passwordComplexitySetting.requireLowercase" [requireUppercase]="passwordComplexitySetting.requireUppercase"
                [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric" [requiredLength]="passwordComplexitySetting.requiredLength"
                validateEqual="adminPassword" maxlength="32">
            <ng-template #adminPasswordRepeatValidationTpl let-control>
                <ul *ngIf="control.errors">
                    <li [hidden]="!control.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                    <li [hidden]="!control.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                    <li [hidden]="!control.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                    <li [hidden]="!control.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                    <li [hidden]="!control.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    <li [hidden]="control.valid">{{"PasswordsDontMatch" | localize}}</li>
                </ul>
            </ng-template>
        </nz-form-control>
        </div>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label nzFor="edition">
            {{"Edition" | localize}}
        </nz-form-label>
        <nz-form-control>
            <nz-select [(ngModel)]="selectedEdtionId" id="edition" name="edition" (ngModelChange)="onEditionChange()">
                <nz-option *ngFor="let edition of editions" [nzLabel]="edition.displayText" [nzValue]="edition.value"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
    <nz-form-control [hidden]="!isSubscriptionFieldsVisible">
        <label nz-checkbox name="IsUnlimited" [(ngModel)]="isUnlimited">{{"UnlimitedTimeSubscription" | localize}}</label>
    </nz-form-control>
    <nz-form-item [hidden]="isUnlimited || !isSubscriptionFieldsVisible">
        <nz-form-label nzFor="SubscriptionEndDate">{{'SubscriptionEndDate' | localize}}</nz-form-label>
        <nz-form-control>
            <nz-date-picker name="SubscriptionEndDateUtc" [(ngModel)]="tenant.subscriptionEndDateUtc"></nz-date-picker>
        </nz-form-control>
    </nz-form-item>
    <nz-form-control [hidden]="!isSubscriptionFieldsVisible">
        <label nz-checkbox name="IsInTrialPeriod" [nzDisabled]="isSelectedEditionFree" [(ngModel)]="tenant.isInTrialPeriod">{{"IsInTrialPeriod" | localize}}</label>
    </nz-form-control>
    <nz-form-control>
        <label nz-checkbox name="ShouldChangePasswordOnNextLogin" [(ngModel)]="tenant.shouldChangePasswordOnNextLogin">{{"ShouldChangePasswordOnNextLogin" | localize}}</label>
    </nz-form-control>
    <nz-form-control>
        <label nz-checkbox name="SendActivationEmail" [(ngModel)]="tenant.sendActivationEmail">{{"SendActivationEmail" | localize}}</label>
    </nz-form-control>
    <nz-form-control>
        <label nz-checkbox name="isActive" [(ngModel)]="tenant.isActive">{{"IsActive" | localize}}</label>
    </nz-form-control>
    <div class="modal-footer">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
            {{"Cancel" | localize}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!tenantCreateForm.form.valid||saving">
            <i nz-icon nzType="save"></i> {{"Save" | localize}}
        </button>
    </div>
</form>